 <!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8">
 		<title></title>
 		<meta name="viewport"
 			content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
 		<link rel="stylesheet" type="text/css" href="css/reset.css">
 		<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
 		<link rel="stylesheet" type="text/css" href="css/style.css">
 		<script src="js/screen.js"></script>
 		<script src="js/jquery.js"></script>
 		<script src="js/swiper.min.js"></script>
 		<script src="./js/vue3.js"></script>
 	</head>
 	<body>
 		<div class="contBox clearfix" id="app">
 			<div class="leftCont clearfix">
 				<div class="inforCont">
 					<div class="titleCell">
 						<span class="titleIcon">
 							<img src="images/1.png">
 						</span>
 						<p>基础信息</p>
 					</div>
 					<div class="inforBox clearfix">
 						<div class="userInfor">
 							<div class="userPic">
 								<img :src="user.UserPhoto" v-if="user.UserPhoto">
 								<img src="images/a_15.jpg" v-else>
 							</div>
 							<div class="userName">
 								{{user.UserName}}<span>{{user.UserType}}</span>
 							</div>
 							<div class="userNumber">
 								{{user.UserCode}}
 							</div>
 						</div>
 						<div class="inforList">
 							<ul>
 								<li>
 									<p>性别：</p>
 									<span>{{user.Sex}}</span>
 								</li>
 								<li>
 									<p>年龄：</p>
 									<span>{{user.Age || '--'}}岁</span>
 								</li>
 								<li>
 									<p>出生日期：</p>
 									<span>{{user.Birthday || '--' 	}}</span>
 								</li>
 								<li>
 									<p>民族：</p>
 									<span>{{user.Nation}}</span>
 								</li>
 								<li>
 									<p>家庭住址：</p>
 									<span>{{user.Address || '--'}}</span>
 								</li>
 								<li>
 									<p>学位：</p>
 									<span>{{user.EducationLevel}}</span>
 								</li>
 								<li>
 									<p>学院：</p>
 									<span>{{user.DeptName}}</span>
 								</li>
 								<li>
 									<p>专业：</p>
 									<span>{{user.MajorName}}</span>
 								</li>
 								<li>
 									<p>年级：</p>
 									<span>{{user.Grade}}</span>
 								</li>
 								<li>
 									<p>班级：</p>
 									<span>{{user.ClassName}}</span>
 								</li>
 								<li>
 									<p>政治面貌：</p>
 									<span>{{user.PoliticalType}}</span>
 								</li>
 								<li>
 									<p>电子邮箱：</p>
 									<span>{{user.Email || '--'}}</span>
 								</li>
 								<li>
 									<p>手机号码：</p>
 									<span>{{user.MobileNo || '--'}}</span>
 								</li>
 								<li>
 									<p>住宿信息：</p>
 									<span>{{user.DormInfo || '--'}}</span>
 								</li>
 								<li>
 									<p>在校状态：</p>
 									<span>{{user.InSchoolState || '--'}}</span>
 								</li>
 							</ul>
 						</div>
 					</div>
 				</div>
 				<div class="selfCont">
 					<div class="honorBox">
 						<div class="titleCell">
 							<span class="titleIcon">
 								<img src="images/2.jpg">
 							</span>
 							<p>个人荣誉</p>
 						</div>
 						<div class="honorList">
 							<h3>获奖情况：</h3>
 							<ul>
 								<li>
 									<p>奖学金：</p>
 									<span>{{user.Prize_JiangXueJin}}</span>
 								</li>
 								<li>
 									<p>荣誉称号：</p>
 									<span>{{user.Prize_RongYuChengHao}}</span>
 								</li>
 								<li>
 									<p>助学金：</p>
 									<span>{{user.Prize_ZhuXueJin}}</span>
 								</li>
 								<li>
 									<p>综合评分：</p>
 									<span>{{user.Prize_ZongHePingFen}}</span>
 								</li>
 							</ul>
 						</div>
 					</div>
 					<div class="noticeBox">
 						<div class="titleCell">
 							<span class="titleIcon">
 								<img src="images/4.jpg">
 							</span>
 							<p>预警监测</p>
 						</div>
 						<div class="noticeSlide">
 							<ul>
 								<li>
 									<div class="noticeIcon">
 										<img src="images/5.jpg">
 									</div>
 									<p>晚归预警</p>
 									<div class="noticeStep">
 										<i
 											:style="`width: ${user.Warning_DormWanGui/user.Warning_AllCount*100}%;`"></i>
 									</div>
 									<span><b>{{user.Warning_DormWanGui}}</b>次</span>
 								</li>
 								<li>
 									<div class="noticeIcon">
 										<img src="images/6.jpg">
 									</div>
 									<p>违规预警</p>
 									<div class="noticeStep">
 										<i :style="`width: ${user.Warning_WeiJi/user.Warning_AllCount*100}%;`"></i>
 									</div>
 									<span><b>{{user.Warning_WeiJi}}</b>次</span>
 								</li>
 							</ul>
 						</div>
 					</div>
 				</div>
 				<div class="clear"></div>
 				<div class="nearGo">
 					<div class="titleCell">
 						<span class="titleIcon">
 							<img src="images/7.jpg">
 						</span>
 						<p>最近轨迹</p>
 					</div>
 					<div class="goStep">
 						<ul>
 							<li v-for="v in user.PassLogList">
 								<div class="dateCont">
 									{{v.LogTime}}
 								</div>
 								<span></span>
 								<p>{{v.LogLocation}}</p>
 							</li>
 						</ul>
 					</div>
 				</div>
 			</div>
 			<div class="rightCont">
 				<div class="titleCell">
 					<span class="titleIcon">
 						<img src="images/3.jpg">
 					</span>
 					<p>最近轨迹</p>
 				</div>
 				<!-- 雷达图 -->
 				<div class="chartsCont" id="chartMain"></div>
 				<div class="tagcloud" id="tagcloud1">
 					<span v-for="v in user.UserLabelList">{{v}}</span>
 				</div>
 			</div>
 		</div>
 	</body>

 	<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
 	<script src="js/tagcloud-2.2.js"></script>
 	<script type="text/javascript">
 		// 初始化vue3
 		const {
 			createApp,
 			ref,
 			nextTick
 		} = Vue
 		const APP = createApp({
 			setup() {
 				// 获取地址栏参数
 				function getUrlSearch(name) {
 					// 未传参，返回空
 					if (!name) return null;
 					// 查询参数：先通过search取值，如果取不到就通过hash来取
 					var after = window.location.search;
 					after = after.substr(1) || window.location.hash.split('?')[1];
 					// 地址栏URL没有查询参数，返回空
 					if (!after) return null;
 					// 如果查询参数中没有"name"，返回空
 					if (after.indexOf(name) === -1) return null;

 					var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
 					// 当地址栏参数存在中文时，需要解码，不然会乱码
 					var r = decodeURI(after).match(reg);
 					// 如果url中"name"没有值，返回空
 					if (!r) return null;

 					return r[2];
 				}

 				const UserCode = getUrlSearch('UserCode')

 				const user = ref({})
 				// 查询用户信息
 				function getUserInfo() {
 					$.ajax({
 						url: 'http://devsg.tsipark.com/_Face_API/BIO_Center/Get_UserProfile.aspx?cmd=GetUserProfile',
 						type: 'post',
 						// 设置的是请求参数
 						data: JSON.stringify({
 							UserCode
 						}),
 						contentType: 'application/json',
 						dataType: 'json',
 						success: function(res) {
 							console.log(res.Data);
 							res.Data.UserLabelList = res.Data.UserLabelList.split(',')
 							user.value = res.Data

 							nextTick(() => {
 								// 3D云标签
 								tagCloud({
 									selector: "#tagcloud1", // 元素选择器，id 或 class
 									fontsize: 20, // 基本字体大小, 默认16，单位px
 									radius: 100, // 滚动横/纵轴半径, 默认60，单位px，取值60，[60]，[60, 60]
 									mspeed: "slow", // 滚动最大速度, 取值: slow, normal(默认), fast
 									ispeed: "normal", // 滚动初速度, 取值: slow, normal(默认), fast
 									direction: 135, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
 									keep: false, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
 									multicolour: true // 彩色字体，颜色随机，取值：true(默认),false
 								});
 								// 雷达图
 								var charts = echarts.init(document.getElementById('chartMain'));
 								var list = [{
 										name: "综合评分",
 										max: 130,
 										color: "#4472c4"
 									},
 									{
 										name: "晚归",
 										max: 130,
 										color: "#42d3d1"
 									},
 									{
 										name: "整晚未归",
 										max: 130,
 										color: "#7975c9"
 									},
 									{
 										name: "请假",
 										max: 130,
 										color: "#ffc600"
 									},
 									{
 										name: "违纪处分",
 										max: 130,
 										color: "#f7995b"
 									},
 									{
 										name: "获取荣誉",
 										max: 130,
 										color: "#42d3d1"
 									},
 									{
 										name: "贷款",
 										max: 130,
 										color: "#7975c9"
 									},
 									{
 										name: "助学金",
 										max: 130,
 										color: "#ffc600"
 									},
 									{
 										name: "奖学金",
 										max: 130,
 										color: "#f7995b"
 									}, {
 										name: "综合评分",
 										max: 130,
 										color: "#4472c4"
 									},
 									{
 										name: "晚归",
 										max: 130,
 										color: "#42d3d1"
 									},
 									{
 										name: "整晚未归",
 										max: 130,
 										color: "#7975c9"
 									},
 									{
 										name: "请假",
 										max: 130,
 										color: "#ffc600"
 									},
 									{
 										name: "违纪处分",
 										max: 130,
 										color: "#f7995b"
 									},
 									{
 										name: "获取荣誉",
 										max: 130,
 										color: "#42d3d1"
 									},
 									{
 										name: "贷款",
 										max: 130,
 										color: "#7975c9"
 									},
 									{
 										name: "助学金",
 										max: 130,
 										color: "#ffc600"
 									},
 									{
 										name: "奖学金",
 										max: 130,
 										color: "#f7995b"
 									},
 								]
 								let TitleList = res.Data.RadarChart.TitleList.split(',')
 								let all = res.Data.RadarChart.Data_1_List.split(',').concat(res
 									.Data.RadarChart.Data_2_List.split(','))
 								all.sort()
 								all.reverse()
 								list = list.slice(0, TitleList.length)
 								list = list.map((v, i) => {
 									v.name = TitleList[i]
 									v.max = all[0]
 									return v
 								})
 								var option1 = {

 									legend: {
 										show: true,
 										top: "4%",
 										right: "2%",
 										itemWidth: 10, // 标签宽度为20px

 									},
 									radar: {
 										// shape: 'circle',
 										textStyle: {
 											fontSize: 20
 										},
 										center: ["50%", "50%"],
 										radius: "60%",
 										splitNumber: 6, //里面有几个圆
 										indicator: list,
 										label: {
 											fontSize: 16,
 										}
 									},
 									series: [{
 											name: "蓝色",
 											type: "radar",
 											symbol: "circle",
 											itemStyle: {
 												normal: {
 													color: "#4472c4",
 												},
 											},
 											data: [{
 												value: res.Data.RadarChart
 													.Data_1_List.split(','),
 												name: "蓝色",

 											}, ],
 											lineStyle: {
 												width: 1,
 												color: "#4472c4",
 											},

 											label: {
 												normal: {
 													show: true,
 													formatter: (params) => {
 														return params.value;
 													},
 													color: "#4472c4",
 													fontSize: 12
 												},
 											},
 										},
 										{
 											name: "橙色",
 											type: "radar",
 											symbol: "circle",
 											itemStyle: {
 												normal: {
 													color: "#f7995b",
 												},
 											},
 											data: [{
 												value: res.Data.RadarChart
 													.Data_2_List.split(','),
 												name: "橙色",
 											}, ],
 											lineStyle: {
 												width: 1,
 												color: "#f7995b",
 											},
 											label: {
 												normal: {
 													show: true,
 													formatter: (params) => {
 														return params.value;
 													},
 													color: "#f7995b",
 													fontSize: 12
 												},
 											},
 										},
 									],
 								};
 								charts.setOption(option1);


 							})
 						}
 					});

 				}
 				getUserInfo()
 				return {
 					user
 				}
 			}
 		})
 		APP.mount('#app')
 	</script>
 </html>